<template>
  <d2-container class="page">
    <el-row  :gutter="20">
      <el-form ref="form" :model="searchParam" label-width="80px"  size="small" >
        <el-col :span="20">
          <el-row  :gutter="20">
            <el-col :span="8">
              <el-form-item label="时间">
                <el-date-picker
                  v-model="sj"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="left">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="玩家">
                <el-autocomplete :fetch-suggestions="querySearchWj" placeholder="请输入玩家" v-model="searchParam.wj"></el-autocomplete>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="物品">
                <el-autocomplete :fetch-suggestions="querySearchWp" placeholder="请输入物品" v-model="searchParam.wp"></el-autocomplete>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row  :gutter="20">
            <el-col :span="6" >
              <el-form-item label="服务"  label-width="80px">
                <el-select filterable v-model="searchParam.fw" placeholder="请选择服务" clearable >
                  <el-option v-for="item in servers" :label="item" :value="item" :key="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-form-item label="线路">
                <el-select filterable v-model="searchParam.xl" placeholder="请选择线路" clearable  >
                  <el-option v-for="item in lines" :label="item" :value="item" :key="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="类别">
                <el-select filterable v-model="searchParam.lb" placeholder="请选择类别" clearable  >
                  <el-option value="积分商店">积分商店</el-option>
                  <el-option value="个人商店">个人商店</el-option>
                  <el-option value="家族商店">家族商店</el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>


        <el-col :span="4">
          <el-button type="primary" plain @click="filterPage">筛选</el-button>
          <el-button type="warning" plain @click="initSearchParam">清空条件</el-button>
        </el-col>
      </el-form>
    </el-row>

    <el-row  :gutter="20">
      <el-table :data="pageinfo.records" style="width: 100%" border>
        <el-table-column prop="sj" label="时间" width="160" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="lb" label="类别" width="160" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="wj" label="玩家" width="260" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="wp" label="物品" width="160" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="mj" label="卖家" width="160" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="text" label="报文"  show-overflow-tooltip> </el-table-column>
        <el-table-column label="服务" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.fw }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="线路" width="70" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.xl }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageinfo.current"
        :page-sizes="[10, 20, 40, 80]"
        :page-size="pageinfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageinfo.total">
      </el-pagination>
    </el-row>
  </d2-container>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      sj:[],
      searchParam:{},
      lines:[],
      pageinfo:{records:[],current:1,size: 10,total:0},
      servers:[],
      pickerOptions: {
          shortcuts: [{
            text: '最近六小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 6);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近十二小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 12);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 );
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    }
  },
  methods: {
    filterPage(){
      this.$api.setIntoStorage("shopWpList",this.searchParam.wp)
      this.$api.setIntoStorage("shopWjList",this.searchParam.wj)
      this.searchParam.currentPage=1
      this.searchPage()
    },
    searchPage(){
      if(this.sj.length===2){
        this.searchParam.startTime = this.sj[0]
        this.searchParam.endTime = this.sj[1]
      }
      this.searchParam.currentPage= this.pageinfo.current
      this.searchParam.pageSize= this.pageinfo.size
      console.log("searchParam:",this.searchParam)
      console.log("pageinfo:",this.pageinfo)
      this.showPageApi()
    },
    querySearchWp(queryString, cb) {
      cb(JSON.parse(localStorage.getItem('shopWpList')))
    },
    querySearchWj(queryString, cb) {
      cb(JSON.parse(localStorage.getItem('shopWjList')))
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageinfo.size = val
      this.searchPage()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageinfo.current = val
      this.searchPage()
    },
    initSearchParam(){
      this.searchParam={
        "currentPage": 1,
        "endTime": "",
        "lb": "",
        "pageSize": 10,
        "startTime": "",
        "wj": "",
        "xl": "",
        "wp": "",
        "fw":""
      }
      this.sj=[]
    },
    async initLines () {
      try {
        const res = await this.$api.FILE_GET("json/lines.json")
        console.log("initLines",res)
        this.lines = res
      } catch (error) {
        console.log(error)
      }
    },
    async initServer () {
      try {
        const res = await this.$api.FILE_GET("json/server.json")
        console.log("initServer",res)
        this.servers = res
      } catch (error) {
        console.log(error)
      }
    },
    async showPageApi () {
      try {
        const res = await this.$api.SHOP_PAGE(this.searchParam)
        console.log("showPageApi",res)
        this.pageinfo = res.data
      } catch (error) {
        console.log(error)
      }
    },
    init() {
      this.initLines()
      this.showPageApi()
      this.initServer()
    },
  },
  created() {
    this.init()
  }
}
</script>

<style scoped>
.el-row {
    margin-bottom: 0px;
  }
</style>
